<script setup>
import { ref,defineProps,onMounted } from 'vue';
let courseName = ref('');
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import runList from '@/components/runList.vue'
import taskList from "@/components/taskList.vue"
const route = useRoute();
const router = useRouter();
const getfId=ref(0);
const showPoints = ref(false);
const activeName = ref('1')
const questionList = ref([
  {
    id: 1,
    question: [
      {
        questionId: 2,
        title: '请问黑龙这么打',
        author: 'Teio',
        status: 0,
        time: '2022-01-01 12:00:00',
        reply: [
          {
            replyId: 1,
            content: '你问我？',
            author: 'Teio',
            time: '2022-01-01 12:00:00'
          },
          {
            replyId: 2,
            content: '你这个情况我还真没见过。这样吧，你先在浏览器或者应用商店搜索“原神”点击下载安装好后立即运行打开原神app，在主页面点击封面进入账号登录页面，在账号登录页面右下角点击“账号密码”，在账号密码输入框下方点击“立即注册”，最后点击“进入游戏”',
            author: 'Teio',
            time: '2022-01-01 12:00:00'
          }
        ]
      },
      {
        questionId: 2,
        title: '原神，启动！',
        author: 'Teio',
        status: 1,
        time: '2022-01-01 12:00:00',
        reply: [
          {
            replyId: 1,
            content: '玩原神玩的',
            author: 'Teio',
            time: '2022-01-01 12:00:00'
          }
        ]
      },
      {
        questionId: 3,
        title: '今天刚给我家莲宝续舰了，祝莲宝天天开心！',
        author: 'Teio',
        status: 2,
        time: '2022-01-01 12:00:00',
        reply: [
          {
            replyId: 1,
            content: '你这个情况我还真没见过。这样吧，你先在浏览器或者应用商店搜索“原神”点击下载安装好后立即运行打开原神app，在主页面点击封面进入账号登录页面，在账号登录页面右下角点击“账号密码”，在账号密码输入框下方点击“立即注册”，最后点击“进入游戏”',
            author: 'Teio',
            time: '2022-01-01 12:00:00'
          }
        ]
      },
      {
        questionId: 4,
        title: '云顶最強伝説と混分の巨兽，军航彭一郎です！',
        author: 'Teio',
        status: 3,
        time: '2022-01-01 12:00:00'
      }
    ]
  }
]);
const taskLi=[
  {
    id:1,
    title:"vue3开发初体验",
    contain:"这把的MVP应该给到格温，关键抢龙，以少打多。女枪的作用有没有格温身上的猫大都是问题，毕竟对面双狙一刺加不死阵和蝎子，很难起作用。\n" +
        "    大G和挖机这把是被康特了，可以看到前期挖机大G很多时候都没有拉开对位经t济甚至是自己还劣势了，但是中后期的牵制作用是有的。两个害虫放走其中一个自家水晶都有炸的风险，只能分散战力来处理，而且很多时候吃掉对面几个大，间接给格温减轻负担。",
    isUpload:false,
  },
  {
    id:2,
    title:"vue3开发初体验",
    contain:"这把的MVP应该给到格温，关键抢龙，以少打多。女枪的作用有没有格温身上的猫大都是问题，毕竟对面双狙一刺加不死阵和蝎子，很难起作用。\n" +
        "    大G和挖机这把是被康特了，可以看到前期挖机大G很多时候都没有拉开对位经济甚至是自己还劣势了，但是中后期的牵制作用是有的。两个害虫放走其中一个自家水晶都有炸的风险，只能分散战力来处理，而且很多时候吃掉对面几个大，间接给格温减轻负担。",
    isUpload:false,
  },
  {
    id:3,
    title:"vue3开发初体验",
    contain:"这把的MVP应该给到格温，关键抢龙，以少打多。女枪的作用有没有格温身上的猫大都是问题，毕竟对面双狙一刺加不死阵和蝎子，很难起作用。\n" +
        "    大G和挖机这把是被康特了，可以看到前期挖机大G很多时候都没有拉开对位经济甚至是自己还劣势了，但是中后期的牵制作用是有的。两个害虫放走其中一个自家水晶都有炸的风险，只能分散战力来处理，而且很多时候吃掉对面几个大，间接给格温减轻负担。",
    isUpload:false,
  },
  {
    id:4,
    title:"vue3开发初体验",
    contain:"这把的MVP应该给到格温，关键抢龙，以少打多。女枪的作用有没有格温身上的猫大都是问题，毕竟对面双狙一刺加不死阵和蝎子，很难起作用。\n" +
        "    大G和挖机这把是被康特了，可以看到前期挖机大G很多时候都没有拉开对位经济甚至是自己还劣势了，但是中后期的牵制作用是有的。两个害虫放走其中一个自家水晶都有炸的风险，只能分散战力来处理，而且很多时候吃掉对面几个大，间接给格温减轻负担。",
    isUpload:false,
  }
]
function getCourseName(id) {
  switch (id) {
    case "1":
      courseName.value = 'v圈历史学';
      break;
    case "2":
      courseName.value = '游戏历史学';
      break;
    case "3":
      courseName.value = 'lolm极地大乱斗理论与实践';
      break;
    case "4":
      courseName.value = '怪物猎人太刀基础到进阶';
      break;
    case "5":
      courseName.value = '英雄联盟从白银到大师——混子的自我修养';
      break;
    case "6":
      courseName.value = '王者荣耀从入门到精通——新手到高手的全攻略';
      break;
    case "7":
      courseName.value = '绝地求生：全军出击——新手到高手的全攻略';
      break;
    case "8":
      courseName.value = '刀塔传奇——从零开始的魔幻冒险';
      break;
    default:
      courseName.value = 'Unknown Course';
      break;
  }
}
const input = ref('');
const showInput = ref(false);

function toggleInput() {
  showInput.value = !showInput.value;
}

function addQuestion() {
  const newQuestion = {
    questionId: questionList.value[0].question.length + 1,
    title: input.value,
    author: 'Teio',
    status: 0,
    time: new Date().toLocaleString(),
    reply: []
  };

  questionList.value[0].question.push(newQuestion);
  input.value = ''; // 清空输入框内容
  console.log(questionList.value);
}
function goToCourseList() {
  router.push('/')
}
function goToStudy() {
  router.push('/study')
}
function goToPersonal() {
  showPoints.value = true;
}
onMounted(() => {
  let id=route.params.id
  console.log(id)
  getCourseName(id)

})
</script>

<template>
  <div class="course-detail">
    <div class="container-left">
      <div class="top">
        <h1 class="title">{{ courseName }}</h1>
<!--        <el-button round @click="goToCourseList()">返回</el-button>-->

      </div>
      <div class="text">
        <div>
          <img class="teacher-img" src="@/assets/img/teacher/1.jpg" alt="">
          <div class="teacher-name">Teio</div>
          <div class="teacher-info">课程列表</div>
        </div>

      </div>
      <div style="margin-left: 200px">
        <el-button type="primary" plain @click="goToStudy">查看成绩</el-button>

<!--        <el-button type="primary" plain @click="goToPersonal">开始学习</el-button>-->
      </div>

    </div>
    <div class="container-right">
      <div class="rounded-border">
        <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
      </div>
    </div>
  </div>
  <div class="course-list">
    <div class="label">
      <el-radio-group v-model="getfId">
        <el-radio :label="0">任务</el-radio>
        <el-radio :label="1">问答</el-radio>
        <el-radio :label="2">进度榜</el-radio>
        <el-radio :label="3">投票</el-radio>
      </el-radio-group>
    </div>
    <div class="content">
      <div v-if="getfId === 0">
        <div class="task">
          <div class="task-content">
            <taskList v-for="item in taskLi" :index="item.id"/>
          </div>
          <div class="demo-collapse">
            <el-collapse v-model="activeName" accordion v-if="showPoints">
              <el-collapse-item title="要点1" name="1">
                <div>
                  Consistent with real life: in line with the process and logic of real
                  life, and comply with languages and habits that the users are used to;
                </div>
                <div>
                  Consistent within interface: all elements should be consistent, such
                  as: design style, icons and texts, position of elements, etc.
                </div>
              </el-collapse-item>
              <el-collapse-item title="要点2" name="2">
                <div>
                  Operation feedback: enable the users to clearly perceive their
                  operations by style updates and interactive effects;
                </div>
                <div>
                  Visual feedback: reflect current state by updating or rearranging
                  elements of the page.
                </div>
              </el-collapse-item>
              <el-collapse-item title="要点3" name="3">
                <div>
                  Simplify the process: keep operating process simple and intuitive;
                </div>
                <div>
                  Definite and clear: enunciate your intentions clearly so that the
                  users can quickly understand and make decisions;
                </div>
                <div>
                  Easy to identify: the interface should be straightforward, which helps
                  the users to identify and frees them from memorizing and recalling.
                </div>
              </el-collapse-item>
              <el-collapse-item title="要点4" name="4">
                <div>
                  Decision making: giving advices about operations is acceptable, but do
                  not make decisions for the users;
                </div>
                <div>
                  Controlled consequences: users should be granted the freedom to
                  operate, including canceling, aborting or terminating current
                  operation.
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div class="task-btn">
            <el-button type="primary" size="mini">提交</el-button>
            <el-button type="primary" size="mini">查看</el-button>
          </div>
          <div class="task-status">
            <el-tag type="success">已完成</el-tag>
            <el-tag type="warning">未完成</el-tag>
            <el-tag type="info">已提交</el-tag>
            <el-tag type="danger">已超时</el-tag>
            <el-tag type="primary">未开始</el-tag>
          </div>
        </div>
      </div>
      <div v-if="getfId === 1">
        <div class="question">
          <div class="question-content">
            <el-button type="primary" round @click="toggleInput">我要提问</el-button>
            <el-input v-model="input" style="width: 240px" placeholder="Please input" v-show="showInput" />
            <el-button type="primary" @click="addQuestion" v-show="showInput">提交</el-button>
            <div v-for="(item, index) in questionList" :key="index">
              <!-- 迭代 item.question 数组 -->
              <div v-for="(question, questionIndex) in item.question" :key="question.questionId">
              <div class="question-question">
                <div class="question-author">
                  <img src="@/assets/img/teacher/1.jpg" alt="" class="author-img">
                  <div class="author-name">{{question.author}}</div>
                </div>
                <p class="question-title">{{ question.title }}</p>
                <p class="question-time">{{question.time}} 回复</p>
              </div>
              <div class="question-reply" v-for="reply in question.reply" :key="reply.id">
                <div class="reply-author">
                  <img src="@/assets/img/teacher/1.jpg" alt="" class="author-img">
                  <div class="author-name">{{reply.author}}</div>
                </div>
                <p class="reply-title">{{reply.content}}</p>
                <p class="reply-time">{{ reply.time }} 回复</p>
              </div>
            </div>
              </div>
          </div>
          <div class="question-btn">
            <el-button type="primary" size="mini">回答</el-button>
            <el-button type="primary" size="mini">查看</el-button>
          </div>
          <div class="question-status">
            <el-tag type="success">已回答</el-tag>
            <el-tag type="warning">未回答</el-tag>
            <el-tag type="info">已查看</el-tag>
            <el-tag type="danger">已关闭</el-tag>
            <el-tag type="primary">未开始</el-tag>
          </div>
        </div>
      </div>
      <div v-if="getfId === 2">
        <run-list></run-list>
      </div>
      <div v-if="getfId === 3">
        <div class="vote">
          <div class="vote-title">投票</div>
          <div class="vote-content">
            <p>问题1：投票1</p>
            <p>问题2：投票2</p>
            <p>问题3：投票3</p>
            <p>问题4：投票4</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped>
.rounded-border {
  border: 2px solid;
  border-radius: 20px;
  padding: 20px;
  width: 300px;
  height: 200px;
  background: white;
}
.course-detail {
  padding: 20px;
  background-color: lightblue;
  border-radius: 5px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  color: white;
  font-weight: bold;
  line-height: 1.5;

}
.course-list {
  width: 80%;
  border: 1px solid #e6e6e6;
  padding: 20px;
  /* 添加阴影效果 */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1); /* 你可以根据需要调整阴影的值 */
  /* 添加圆角效果 */
  border-radius: 10px; /* 你可以根据需要调整圆角的值 */
  margin: 10px auto;
  background-color: #fff;

  .content {
    padding: 10px;

  }
  .question {
    margin-left: 50px;
  }

  .task {
    .task-btn {
      margin-top: 10px;
    }

    .task-status {
      margin-top: 10px;
    }
  }
}
.label{
  margin: 10px;
}
.teacher-info {
  margin-left: 10px
}
.question-question{
  border-bottom: 1px solid #e6e6e6;
}
.question-reply{
  margin-top: 10px;
  margin-left: 50px;
  border-bottom: 1px solid #e6e6e6;
}
.reply-author {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: bold;
}
.reply-content {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.reply-time {
  margin-top: 5px;
  font-size: 14px;
  color: #999;
}
.question-btn {
  margin-top: 10px;
}


.question-author {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: bold;
}
.author-name{

  margin-left: 10px;
  color: #333;
  font-size: 14px;
  font-weight: bold;
}

.author-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.question-title {
  margin-top: 10px;
  font-size: 18px;
}
.question-time {
  margin-top: 5px;
  font-size: 14px;
  color: #999;
}
.question-content {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;

}
.question-list{

}

.question-btn {
  margin-top: 10px;
}

.question-status {
  margin-top: 10px;
}
.teacher-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
  float: left;

}
.top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.title {
  width: 900px;
  text-align: left;
  margin-left: 200px;
  font-size: 32px;
  font-weight: bold;
}
.text {
  width: 500px;
  text-align: left;
  margin-top: 0;
  margin-bottom: 20px;
  margin-left: 200px;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.container-right{
  margin-left: auto;
  margin-right: 500px;
  margin-top: 20px;
  text-align: right;
}
</style>